<template>
  <div class="vip-benefits-container">
    <h2 class="section-title">更多大会员权益</h2>

    <div class="benefits-cards">
      <!-- 动态遍历卡片 -->
      <div
        class="benefit-card"
        v-for="(card, index) in benefitCards"
        :key="index"
      >
        <div class="text-content">
          <h3>{{ card.title }}</h3>
          <p>{{ card.description }}</p>
        </div>
        <div class="icons-group">
          <!-- 动态遍历图标 -->
          <img
            v-for="(icon, iconIndex) in card.icons"
            :key="iconIndex"
            :src="icon"
            :alt="`${card.title}图标-${iconIndex + 1}`"
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 导入所有图标（根据实际路径修改）
import gameIcon1 from '@/assets/imgs/big_vip/game_gift1.png';
import gameIcon2 from '@/assets/imgs/big_vip/game_gift2.png';
import gameIcon3 from '@/assets/imgs/big_vip/game_gift3.png';
import costumeIcon1 from '@/assets/imgs/big_vip/decoration_img1.png';
import costumeIcon2 from '@/assets/imgs/big_vip/decoration_img2.png';
import costumeIcon3 from '@/assets/imgs/big_vip/decoration_img3.png';

// 卡片数据
const benefitCards = [
  {
    title: "游戏礼包",
    description: "20款游戏礼包待领取",
    icons: [gameIcon1, gameIcon2, gameIcon3] // 三个不同的游戏图标
  },
  {
    title: "专属装扮",
    description: "头盔挂件、如意卡片",
    icons: [costumeIcon1, costumeIcon2, costumeIcon3] // 三个不同的装扮图标
  }
];
</script>
<style scoped lang="scss">
.vip-benefits-container {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;

  .section-title {
    font-size: 24px;
    margin-bottom: 30px;


    &::after {
      content: '';
      display: block;
      width: 60px;
      height: 3px;
      margin: 10px auto 0;
    }
  }

  .benefits-cards {
    display: flex;
    gap: 30px;
// justify-content: center;
    .benefit-card {
      flex: 1;
      max-width: 700px;
      background: #fff;
      border-radius: 12px;
      padding: 25px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      display: flex;
      align-items: center;
      transition: transform 0.3s, box-shadow 0.3s;

      .text-content {

        padding-right: 25px;

        h3 {
          font-size: 20px;
          margin-bottom: 10px;
          font-weight: 600;
        }

        p {
          font-size: 10px;
          color: #666;
          line-height: 1.6;
        }
      }

      .icons-group {
        display: flex;
        gap: 30px;

        img {

          width: 104px;
          height: 104px;
          object-fit: contain;
          cursor: pointer;
          transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
          border-radius: 8px;
          padding: 5px;
          background: rgba(255, 78, 78, 0.05);

          &:hover {
              transform: scale(1.15); /* 放大15% */
            // transform: scale(1.1) rotate(5deg);
            // background: rgba(255, 78, 78, 0.1);
            // filter: drop-shadow(0 4px 8px rgba(255, 78, 78, 0.2));
          }
        }
      }
    }
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .vip-benefits-container {
    padding: 15px;

    .section-title {
      font-size: 20px;
      margin-bottom: 20px;
    }

    .benefits-cards {
      flex-direction: column;
      gap: 20px;

      .benefit-card {
        max-width: 100%;
        padding: 20px;
        flex-direction: column;
        text-align: center;

        .text-content {
          padding-right: 0;
          margin-bottom: 15px;
        }

        .icons-group {
          justify-content: center;
        }
      }
    }
  }
}
</style>
